<template>
	<view class="info-page">
	
		<view class="info-list">
			<view class="info-item" @click="modify">
				<text class="item-label">头像</text>
				<image class="avatar-img" :src="userDetails.avatar" mode="aspectFill" />
			</view>
			<view class="info-item">
				<text class="item-label">实名认证</text>
				<navigator :url="'/pages/user/bind/bind?avatar='+userDetails.avatar+'&nickname='+userDetails.nickname+'&card='+userDetails.card+'&alipay_account='+userDetails.alipay_account+'&realname='+userDetails.realname" class="bind-btn">查看绑定</navigator>
			</view>
			<view class="info-item" @click="modify">
				<text class="item-label">昵称</text>
				<text class="item-value gray">{{userDetails.nickname}}</text>
			</view>
			<view class="info-item" @click="modify">
				<text class="item-label">支付宝</text>
				<text class="item-value gray">{{userDetails.alipay_account??''}}</text>
			</view>
		</view>

		<!-- 退出按钮 -->
		<view class="logout-btn-box">
			<button class="logout-btn" @click="logoutSub">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { logout } from "@/api/member.js"
	import { useUserStore } from '@/store/userStore';
	const userStore = useUserStore();
	const userDetails = reactive({});
	onShow(() => {
	  console.log("onShow userDetails")
	  console.log(userStore.userDetails)
		Object.assign(userDetails,{
			avatar: userStore.userDetails?.avatar || '',
			nickname: userStore.userDetails?.nickname || '',
			card: userStore.userDetails?.card || '',
			alipay_account: userStore.userDetails?.alipay_account || '',
			realname:userStore.userDetails?.realname || ''
		})
	 
	});
	
	const logoutSub = () => {
		logout().then(res=>{
			uni.removeStorageSync("token");
			uni.navigateTo({
				url: '/pages/login/login'
			});
		})
	}
	
	const modify = () =>{
		uni.navigateTo({
			url: `/pages/user/modify/modify?avatar=${userDetails.avatar}&nickname=${userDetails.nickname}&card=${userDetails.card}&alipay_account=${userDetails.alipay_account}&realname=${userDetails.realname}`
		});
	}
</script>

<style scoped>
	.info-page {
		min-height: 100vh;
		background: #f6f7fb;
		display: flex;
		flex-direction: column;
	}
	.info-list {
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
		margin-bottom: 32rpx;
		margin-top: 2rpx;
	}
	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		height: 90rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}
	.info-item:last-child {
		border-bottom: none;
	}
	.item-label {
		font-size: 28rpx;
		color: #222;
	}
	.avatar-img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: #eaf2ff;
	}
	.bind-btn {
		background: #4a90e2;
		color: #fff;
		font-size: 24rpx;
		border-radius: 32rpx;
		padding: 8rpx 32rpx;
		font-weight: bold;
	}
	.item-value {
		font-size: 26rpx;
	}
	.gray {
		color: #bbb;
	}
	.logout-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: transparent;
		z-index: 99;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.logout-btn {
		width: 100vw;
		height: 90rpx;
		background: #4a90e2;
		color: #fff;
		font-size: 32rpx;
		border-radius: 0;
		border: none;
		margin: 0;
		font-weight: bold;
	}
	.back-icon image{
		width: 40rpx;
		height: 40rpx;
	}
</style>
